<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:a4j="http://richfaces.org/a4j">

<head>		
<script type="text/javascript">
			function loadChgPhoto() {
			$("#divChgPhoto").load("maphoto.html");
			}
</script>		
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />			
<meta name="generator" content="PSPad editor, www.pspad.com" />				
<link rel="stylesheet" type="text/css" href="../style/style.css" />				

<title>Gestion de - (TypeAEM MarqueAEM) - (nomProprietaire) - eSharing </title>	

</head>	
<body>		
   	<div class = "topbarcontenu">
	    <div>
	      <span class = "logo"><img src = "images/logo.jpg" /></span>
	      <span class = "toplink">Bienvenue, <a href = "tableaudebord.html">(nomUtilisateur)</a> <a href = "">Déconnexion</a></span>
	      <span class = "topbarrechercher">
	          <h:form class = "recherchepages">
	            <h:inputText value="#{mbFichePret.rechercher()}" id = "cetaem" class="textrecherche" maxlength = "80" placeholder = "Que voulez-vous emprunter ?" />
	            <h:commandButton value="Rechercher" action="#{mbFichePret.rechercher()}"  id = "btnrechercher" />
	          </h:form>
	      </span>
	    </div><br />
	   	<div>
	      <span class = "parrainage">
	        
	        <h:form id = "parrainer">
	          <h:inputText value=""  id = "cetaem" class="mailfilleul" maxlength = "80" placeholder = "Adresse mail" />
	          <h:commandButton value="Parrainer un ami !" action="#{mbFichePret.parrainer()}"  id = "btnparrain" />
	        </h:form>
	      </span>
	    </div>
	</div>		
    <div>			
      <span id="lienblanc">			
      </span>			
      <span id="lienPanier" style="float:right;">				
        <a href="">Panier</a>			
      </span>			
      <span id="lienblanc" style="float:right;">			
      </span>			
      <span id="lienMonActivite" style="float:right;">				
        <a href="">Mon Activite</a>			
      </span>			
      <span id="lienblanc" style="float:right;">			
      </span>			
      <span id="lienAlertes" style="float:right;">				
        <a href="">Alertes</a>			
      </span>			
      <span id="lienblanc" style="float:right;">			
      </span>			
      <span id="lienMessagerie" style="float:right;">				
        <a href="">Messagerie</a>			
      </span>		
    </div>		
    <p>		
    </p>		
    <div class="liens">			
      <ul class="lienlist">				
        <li>					
        <a href="">Mon compte</a>					
        <ul>						
          <li>							
          <a href="#" onclick="loadChgPhoto()">Ma photo</a>						
          </li>						
          <li>							
          <a href="">Mes infomations personnelles</a>						
          </li>						
          <li>							
          <a href="">Mes congés</a>						
          </li>						
          <li>							
          <a href="">Changer mot de passe</a>						
          </li>					
        </ul>				
        </li>				
        <li>					
        <a href="">Mon parc d'appareils</a>				
        </li>				
        <li>					
        <a href="">Mon agenda</a>					
        <ul>						
          <li>							
          <a href="">Mes prêts</a>						
          </li>						
          <li>							
          <a href="">Mes emprunts</a>						
          </li>						
          <li>							
          <a href="">Mes congés</a>						
          </li>					
        </ul>				
        </li>				
        <li>					
        <a href="">Ma messagerie</a>					
        <ul>						
          <li>							
          <a href="">Messages reçus</a>						
          </li>						
          <li>							
          <a href="">Messages envoyés</a>						
          </li>					
        </ul>				
        </li>				
        <li>					
        <a href="">Mon solde</a>				
        </li>				
        <li>					
        <a href="">Mes parrainnages</a>					
        <ul>						
          <li>							
          <a href="">Mes filleuls</a>						
          </li>						
          <li>							
          <a href="">Parrainer</a>						
          </li>					
        </ul>				
        </li>			
      </ul>		
    </div>		
	
	<div id="pagecontenu">			
	    	<h2>Gestion d'un appareil</h2>				
	      <div>					
	        <img src="" width="250px" height="200px" />					
	        <input type="button" value="Modifier l'image" />				
	      </div>				
	      <fieldset>					
	        <legend>Statistiques 					
	        </legend>					
	        <table>						
	          <tr>
	          <td> Nombre d'emprunts:</td>							
	          <td> (Nombre de fois que l'objet a été emprunté)</td>						
	          </tr>						
	          <tr>
	          <td>Moyenne des notes:</td>
	          <td>(Note moyenne en étoiles)</td>						
	          </tr>					
	        </table>				
	      </fieldset>				
	     	<table>					
	        	<tr>
	        	<td> Description de l'appareil</td>
	        	<td><textarea>Description de l'appareil</textarea></td>
	        	<td><input type="button" value="Modifier la description" /></td>					
	        	</tr>				
	      </table>
	      	<h3>Programmer des indisponibilités</h3>         
	      	<div>Pendant une période d'indisponibilité, vos appareils ne seront pas empruntables sur le système. (insérer avertissements en fonction des règles de gestion)
	  		</div>    
	      	<div>         
	        <h:form action="" id="formCongés1">           
	          <input type = "date" id = "datedebut" placeholder = "De... ?" />      
	          <input type = "date" id = "datefin" placeholder = "À... ?" />      
	          <center>
	            <h:commandButton action="#{mbGestionAem.calModifIndisponibilite}"  id = "btnTempsRechercher" value="Programmer une nouvelle période d'indisponibilité" />
	          </center>             
	      	</h:form>
	      	</div>  
	      	<div>           
	        	<span>
	        	<rich:calendar></rich:calendar>
	        	</span>      
	        <span style = "float:right;" id = "listeCongés">               
	          <table>                   
	            <tr>                       
		            <td>De</td>
		            <td>À</td>            
		            <td></td>   
		            <td></td>                     
	            </tr>                   
	            <tr>                     
	              	<td>(date début)</td>
	              	<td>(date fin)</td>            
	              	<td><h:form><h:commandLink value="Modifier" action="#{mbGestionAem.modifierIndispo()}" /></h:form></td>            
	              	<td><h:form><h:commandLink value="Supprimer" action="#{mbGestionAem.supprimerIndispo()}" /></h:form></td>                     
	            </tr>                   
	            <tr>                      
	            	<td>(date début)</td>            
	            	<td>(date fin)</td>            
	            	<td><h:form><h:commandLink value="Modifier" action="#{mbGestionAem.modifierIndispo()}" /></h:form></td>            
	              	<td><h:form><h:commandLink value="Supprimer" action="#{mbGestionAem.supprimerIndispo()}" /></h:form></td>                           
	            </tr>                 
	          </table>                        
	        </span>           
	      </div>
	      <h3>Programmer des invisibilités</h3>         
	      <div>Pendant une période d'invisibilité, vos appareils ne seront introuvables sur le système. (insérer avertissements en fonction des règles de gestion)
	      </div>    
	      <div>         
	        <h:form action="" id="formCongés2">           
	          <h:outputLabel value="#{mbGestionAem.dateDebut}" id = "datedebut" placeholder = "De... ?" />     
	          <h:outputLabel value="#{mbGestionAem.dateFin}" id = "datefin" placeholder = "À... ?" />      
	          <center>
	            <h:commandButton action="#{mbGestionAem.calModifIndisponibilite}" id = "btnTempsRechercher" value="Programmer une nouvelle période d'invisibilité" />
	          </center>             
	      </h:form>        
	      </div>
	      <div>           
	        <span>
	        <rich:calendar></rich:calendar>
	        </span>      
	        <span style = "float:right;" id = "listeCongés">               
	          <table>                   
	            <tr>                      
		            <td>De</td>            
		            <td>À</td>            
		            <td></td>            
		            <td></td>                     
	            </tr>                   
	            <tr>                       
	            	<td>(date début)</td>            
	            	<td>(date fin)</td>            
	            	<td><h:form><h:commandLink value="Modifier" action="#{mbGestionAem.modifierInvisib()}" /></h:form></td>            
	              	<td><h:form><h:commandLink value="Supprimer" action="#{mbGestionAem.supprimerInvisib()}" /></h:form></td>                     
	            </tr>                   
	            <tr>                       
	            	<td>(date début)</td>            
	            	<td>(date fin)</td>            
	            	<td><h:form><h:commandLink value="Modifier" action="#{mbGestionAem.modifierInvisib()}" /></h:form></td>            
	              	<td><h:form><h:commandLink value="Supprimer" action="#{mbGestionAem.supprimerInvisib()}" /></h:form></td>                     
	            </tr>                 
	          </table>                        
	        </span>           
	      </div>
	      <input type="date" style="height:60"/>
	      <h:commandButton action="#{mbGestionAem.supprimerAem}" value="Supprimer cet appareil de votre parc"/>			
	</div>		
    
    
    <div id="goodies">			
      <ul id="sociallinks" style="float:right">				
        <li>					
        <a href="@sadfdsafdfd">FB</a>				
        </li>				
        <li>					
        <a href="@sadfdsafdfd">TW</a>				
        </li>				
        <li>					
        <a href="@sadfdsafdfd">G+</a>				
        </li>				
        <li>					
        <a href="@sadfdsafdfd">RSS</a>				
        </li>			
      </ul>		
    </div>		
    <div class="footer">			
      <span style="align: left">				
        <a href="/trust">Confiance et sécurité</a>			
      </span>			
      <span style="align: left">				
        <a href="/about/about-us">A propos</a>			
      </span>		
    </div>	
  </body>
</html>	